<!--伪装模式·红橙广告风 + 按钮隐显-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Edge Panel</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            background: transparent;
            height: 100%;
            width: 100%;
            overflow: hidden;
            font-family: "微软雅黑", sans-serif;
        }

        /* 网页内容区域，预留上下广告位 */
        #webview-container {
            position: absolute;
            top: 40px;   /* 顶部广告栏高度 */
            bottom: 40px;/* 底部广告栏高度 */
            width: 100%;
        }

        #webview {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* 顶部广告风格标题栏（第一版配色） */
        #title-bar {
            width: 100%;
            height: 40px;
            background: linear-gradient(90deg, #ffcc00, #ff6600);
            color: #fff;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 2px solid #cc3300;
            -webkit-app-region: drag;
            padding: 0 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            font-size: 14px;
            position: relative;
        }

        #left-controls, #right-controls {
            display: flex;
            align-items: center;
            gap: 6px;
            -webkit-app-region: no-drag; /* 按钮可点 */
        }

        #title-text {
            flex: 1;
            text-align: center;
            font-size: 15px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            pointer-events: none;
        }

        /* 第一版黄色按钮风格 */
        .ad-btn {
            background: yellow;
            border: 1px solid orange;
            border-radius: 4px;
            padding: 3px 6px;
            cursor: pointer;
            font-weight: bold;
            font-size: 13px;
            color: red;
            transition: opacity 0.2s ease, filter 0.2s ease;
        }
        .ad-btn:hover {
            filter: brightness(1.05);
        }

        /* 关闭按钮：常亮但低调一点（广告里的小“×”） */
        #close-btn {
            background: transparent;
            border: none;
            color: rgba(255,255,255,0.85);
            font-weight: bold;
            font-size: 16px;
            line-height: 1;
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 4px;
            transition: color 0.2s ease, background-color 0.2s ease;
            margin-right: 15px;
        }
        #close-btn:hover {
            color: #ffffff;
            background-color: rgba(0,0,0,0.08);
        }

        /* 隐显规则：前进/后退只在“左侧按钮区域”悬停时显示；缩小只在“右侧按钮区域”悬停时显示 */
        .show-on-hover-left, .show-on-hover-right {
            opacity: 0;
            pointer-events: none; /* 避免挡住 hover */
        }
        #left-controls:hover .show-on-hover-left {
            opacity: 1;
            pointer-events: auto;
        }
        #right-controls:hover .show-on-hover-right {
            opacity: 1;
            pointer-events: auto;
        }

        /* 底部闪烁广告（第一版配色与动画） */
        #bottom-ad {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 40px;
            background: linear-gradient(90deg, #ff0000, #ff6600);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            text-shadow: 1px 1px 3px black;
            animation: flash 1s infinite;
            padding: 0 8px;
            box-sizing: border-box;
        }
        @keyframes flash {
            0%, 100% { background: linear-gradient(90deg, #ff0000, #ff6600); }
            50% { background: linear-gradient(90deg, #ff6600, #ff0000); }
        }

        #minimize-btn,#back,#forward,#reload {
            border: none;
            background: none;
        }
    </style>
</head>
<body>
<div id="container">
    <!-- 顶部广告风格标题栏 -->
    <div id="title-bar">
        <div id="left-controls">
            <!-- 前进/后退：默认隐藏，仅在左侧区域悬停时显示 -->
            <button id="back" class="ad-btn show-on-hover-left">❮</button>
            <button id="forward" class="ad-btn show-on-hover-left">❯</button>
            <button id="reload" class="ad-btn show-on-hover-left" onclick="window.location.reload()">⭮</button>
        </div>
        <div id="title-text">🔥 新区开服送神装！限时秒杀中 🔥</div>
        <div id="right-controls">
            <!-- 缩小：默认隐藏，仅在右侧区域悬停时显示 -->
            <button id="minimize-btn" class="ad-btn show-on-hover-right" onclick="minimize()">➖</button>
            <!-- 关闭：常亮，但低调一些 -->
            <button id="close-btn" onclick="winClose()">×</button>
        </div>
    </div>

    <!-- 网页内容区域 -->
    <div id="webview-container">
        <webview id="webview" allowpopups></webview>
    </div>

    <!-- 底部闪烁广告 -->
    <div id="bottom-ad">⚔ 一刀999 传奇装备全靠爆！点击下载立即开战！ ⚔</div>
</div>

<script>
    const urlParams = new URLSearchParams(window.location.search);
    const url = urlParams.get('url');
    const winName = urlParams.get('winName');
    const topText = urlParams.get('topText');
    const bottomText = urlParams.get('bottomText');

    const webview = document.getElementById('webview');
    webview.src = url && url.startsWith("http") ? url : "http://" + (url || "");

    const backBtn = document.getElementById('back');
    const forwardBtn = document.getElementById('forward');
    const titleText = document.getElementById('title-text');
    const bottomAd = document.getElementById('bottom-ad');

    titleText.textContent = topText;
    bottomAd.textContent = bottomText;

    backBtn.addEventListener('click', () => {
        if (webview.canGoBack && webview.canGoBack()) webview.goBack();
    });

    forwardBtn.addEventListener('click', () => {
        if (webview.canGoForward && webview.canGoForward()) webview.goForward();
    });

    // 在很多环境里 new-window 事件叫 did-create-window，保持你的原逻辑
    webview.addEventListener('new-window', (e) => {
        webview.src = e.url;
    });

    function minimize() {
        window.utools.sendToParent('minimize', winName);
    }

    function winClose() {
        window.utools && window.utools.sendToParent && window.utools.sendToParent('win-close', winName);
        window.close();
    }
</script>
</body>
</html>
